/**
 * src/components/NetworkStatus/index.tsx
 * ------------------------------------
 * 网络状态监控组件
 * 1. 实时监控网络连接状态变化
 * 2. 在离线时显示提示信息
 * 3. 网络恢复时自动隐藏提示
 * 4. 支持自定义状态变化回调函数
 * 该组件用于提升用户体验，确保用户了解当前网络状态
 * 创建日期：2025-08-06
 */
import React, { useState, useEffect } from 'react'
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

interface NetworkStatusProps {
  onStatusChange?: (isOnline: boolean) => void;
}

/**
 * 网络状态监控组件
 * @param onStatusChange - 网络状态变化时的回调函数
 * @returns 网络状态提示组件
 */
const NetworkStatus: React.FC<NetworkStatusProps> = ({ onStatusChange }) => {
  const [isOnline, setIsOnline] = useState(true)
  const [visible, setVisible] = useState(false)
  const [networkType, setNetworkType] = useState<string>('')
  
  useEffect(() => {
    // 初始化时检查网络状态
    checkNetworkStatus()
    
    // 监听网络状态变化
    Taro.onNetworkStatusChange(res => {
      const newIsOnline = res.isConnected
      setNetworkType(res.networkType)
      
      if (isOnline !== newIsOnline) {
        setIsOnline(newIsOnline)
        setVisible(!newIsOnline) // 只在离线时显示
        
        if (onStatusChange) {
          onStatusChange(newIsOnline)
        }
        
        // 如果从离线恢复到在线，显示提示，然后自动隐藏
        if (newIsOnline) {
          setVisible(true)
          setTimeout(() => {
            setVisible(false)
          }, 3000)
        }
      }
    })
    
    return () => {
      // 组件卸载时，取消监听
      Taro.offNetworkStatusChange()
    }
  }, [isOnline, onStatusChange])
  
  /**
   * 检查当前网络状态
   * 获取网络类型并更新组件状态
   */
  const checkNetworkStatus = async () => {
    try {
      const res = await Taro.getNetworkType()
      const newIsOnline = res.networkType !== 'none'
      setNetworkType(res.networkType)
      setIsOnline(newIsOnline)
      setVisible(!newIsOnline) // 只在离线时显示
      
      if (onStatusChange) {
        onStatusChange(newIsOnline)
      }
    } catch (error) {
      console.error('获取网络状态失败:', error)
    }
  }
  
  // 如果不需要显示，返回null
  if (!visible) {
    return null
  }
  
  return (
    <View className={`network-status ${isOnline ? 'online' : 'offline'}`}>
      <View className='status-icon'>
        {isOnline ? '📶' : '📴'}
      </View>
      <Text className='status-text'>
        {isOnline 
          ? `网络已恢复 (${networkType})` 
          : '当前处于离线状态，部分功能可能受限'}
      </Text>
      {!isOnline && (
        <Text className='status-subtext'>
          应用将在网络恢复后自动同步数据
        </Text>
      )}
    </View>
  )
}

export default NetworkStatus 